import React from 'react';
import '../../assets/styles/common/px2rem.scss';
import './index.scss';
import Swiper from './swiper/index.js';
import { Link } from 'react-router-dom';
import Loading from "../../components/Loading"


class Home extends React.Component {
  state = {
    bannerList: [],
    goodsOne: [],
    goodsTwo: [],
    goodsThree: [],
    home1: '',
    home2: '',
    home3: '',
    home4: '',
    home5: " "
  }
  render() {
    return (

      <div className="home">
        {this.state.home5 === 'AA' ? " " : <Loading />}
        <div className='home_header'>
          <div className='home_logo'>
            <img src='http://www.hangowa.com/wap/images/home_logo.png' alt='err' />
          </div>
          <div className='home_wrap'>
            <Link to='/search' className='iconfont'>&#xe638;</Link>
            <Link to='/cart' className='iconfont'>&#xe611;</Link>
          </div>
        </div>


        <div className="home_AA">
          <Swiper autoplay={true} slide={this.state.bannerList} />
          <div className='home_nav'>
            <ul>
              <li>
                <Link to='/details'>
                  <i className='i_shop iconfont' style={{ background: "#FB6E52" }}>&#xe627;</i>
                  <p>我的商城</p>
                </Link>
              </li>
              <li>
                <Link to='/cart'>
                  <i className='i_cart iconfont' style={{ background: "#48CFAE" }}>&#xe611;</i>
                  <p>购物车</p>
                </Link>
              </li>
              <li>
                <Link to='/details'>
                  <i className='i_note iconfont' style={{ background: "#4FC0E8" }}>&#xe634;</i>
                  <p>每日签到</p>
                </Link>
              </li>
            </ul>
          </div>
          <div className='home_block'>
            <ul>
              <li>
                <Link to='/details'>
                  <img src={this.state.home4.rectangle1_image} alt='err'></img>
                </Link>
              </li>
              <li>
                <Link to='/details'>
                  <img src={this.state.home4.rectangle2_image} alt='err'></img>
                </Link>
              </li>
              <li>
                <Link to='/details'>
                  <img src={this.state.home4.square_image} alt='err'></img>
                </Link>
              </li>
            </ul>
          </div>
          <div className='home_item_pic'>
            <Link to='/details'>
              <img src={this.state.home1.image} alt='err'></img>
            </Link>
          </div>
          <div className='home_block2'>
            <ul>
              {this.state.goodsOne.map(item => {
                return (
                  <li key={item.goods_id}>
                    <Link to={{ pathname: `/details/${item.goods_id}` }}>
                      <div>
                        <img src={item.goods_image_url} alt='err'></img>
                      </div>
                      <dl>
                        <dt>{item.goods_name}</dt>
                        <dd>¥{item.goods_price}</dd>
                      </dl>
                    </Link>
                  </li>
                )
              })}
            </ul>
          </div>
          <div className='home_item_pic ' style={{ marginTop: '10px' }}>
            <Link to='/details'>
              <img src={this.state.home2.image} alt='err'></img>
            </Link>
          </div>
          <div className='home_block3'>
            <ul>
              {this.state.goodsTwo.map(item => {
                return (
                  <li key={item.goods_id}>
                    <Link to={{ pathname: `/details/${item.goods_id}` }}>
                      <div>
                        <img src={item.goods_image_url} alt='err'></img>
                      </div>
                      <dl>
                        <dt>{item.goods_name}</dt>
                        <dd>¥{item.goods_price}</dd>
                      </dl>
                    </Link>
                  </li>
                )
              })}
            </ul>
          </div>
          <div className='home_item_pic item_pic' style={{ marginTop: '10px' }}>
            <Link to='/details'>
              <img src={this.state.home3.image} alt='err'></img>
            </Link>
          </div>
          <div className='home_block4'>
            <dl className='home_block4_title'>
              <dt>汉购精选</dt>
              <dd>--&nbsp;&nbsp;小编向您推荐以下商品&nbsp;&nbsp;--</dd>
            </dl>
            <ul>
              {this.state.goodsThree.map(item => {
                return (
                  <li key={item.goods_id}>
                    <Link to={{ pathname: `/details/${item.goods_id}` }}>
                      <div>
                        <img src={item.goods_image_url} alt='err'></img>
                      </div>
                      <dl>
                        <dt>{item.goods_name}</dt>
                        <dd>¥{item.goods_price}</dd>
                      </dl>
                    </Link>
                  </li>
                )
              })}
            </ul>
          </div>
          <div className='home_footer'>
            <div className='nav_text'>
              <Link to='/login'>登录</Link>
              <Link to='/register'>注册</Link>
              <Link to='/details'>反馈</Link>
              <Link to='/details'>返回顶部</Link>
            </div>
            <div className='nav_pic'>
              <Link to='/details'>
                <span className='iconfont'>&#xe652;</span>
                <p>客户端</p>
              </Link>
              <Link to='/details'>
                <span className='iconfont'>&#xe622;</span>
                <p>触屏版</p>
              </Link>
              <Link to='/details'>
                <span className='iconfont'>&#xe633;</span>
                <p>电脑版</p>
              </Link>
            </div>
            <div className='copyright'>
              Copyright © 2014-2016 汉购网hangowa.com版权所有
                    </div>
          </div>
        </div>
      </div>


    )
  }
  //获取轮播图数据
  getBannerList() {
    fetch('http://www.hangowa.com/mo_bile/index.php?act=index')
      .then(response => response.json())
      .then(res => {
        console.log(res.datas)
        if (res.code === 200) {
          this.setState({
            bannerList: res.datas.list[0].adv_list.item.map(i => {
              return i.image
            })
          })
        } else {
          alert(res.msg);
        }
      })
  }
  //获取商品数据
  getInfo = () => {
    fetch('http://www.hangowa.com/mo_bile/index.php?act=index')
      .then(response => response.json())
      .then(res => {
        if (res.code === 200) {
          let AA = 'AA'
          this.setState({
            goodsOne: res.datas.list[3].goods.item,
            goodsTwo: res.datas.list[5].goods.item,
            goodsThree: res.datas.list[7].goods.item,
            home1: res.datas.list[2].home1,
            home2: res.datas.list[4].home1,
            home3: res.datas.list[6].home1,
            home4: res.datas.list[1].home4,
            home5: AA


          })
        } else {
          alert(res.msg)
        }
      })
  }

  componentDidMount() {
    this.getBannerList();
    this.getInfo();
  }
}

export default Home
